<template>
  <div id="SurVey">
    <div class="sur-header">
      <div class="sh-left">
      	<div class="shle-header">
      		<div class="left-top1">
	      		<p>问卷量</p>
	      		<span>1202</span>
	      	</div>
	      	<div class="left-top2">
	      		<p>问卷回收量</p>
	      		<span>101</span>
	      	</div>
      	</div>
      	<div class="shle-footer">
      		<div class="left-footer1">
	      		<p>回收率</p>
	      		<span>40%</span>
	      	</div>
	      	<div class="left-footer2">
	      		<p>平均完成时间</p>
	      		<span>20min</span>
	      	</div>
      	</div>
      </div>
      <div class="sh-right">
      	<div class="shr-header">
      		<span class="shr-span1">问卷回收量</span>
      		<span class="shr-span2">按组织和员工架构查询</span>
      		<div class="block">
          	<el-cascader :options="options" v-model="selectedOptions" @change="handleChange">
          	</el-cascader>
        	</div>
      	</div>
      	<div class="shr-footer" id="shadeHack"></div>
      </div>
    </div>
    <div class="sur-footer">
    	<div class="sf-left">
    		<div class="sfl-header">
    			<span>回收来源</span>
    			<el-select v-model="sflvalue" placeholder="请选择回收来源">
            <el-option v-for="sflitem in sfloptions" :key="sflitem.sflvalue" :label="sflitem.sfllabel" :value="sflitem.sflvalue">

            </el-option>
          </el-select>
    		</div>
    		<div class="sfl-footer" id="sflf"></div>
    	</div>
    	<div class="sf-right">
    		<div class="sfr-header">
      		<span class="sfr-span1">问卷回收量</span>
      		<span class="sfr-span2">按组织和员工架构查询</span>
      		<div class="block">
          	<el-cascader :options="options" v-model="selectedOptions1" @change="handleChange">
          	</el-cascader>
        	</div>
      	</div>
      	<div class="sfr-footer">
      		<p><span>总业主数:</span><span>3000</span></p>
      		<p><span>发出量:</span><span>1200</span></p>
      		<p><span>回收量:</span><span>100</span></p>
      		<h3>回收率:<span>40%</span></h3>
      	</div>
    	</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        page: 66,
        time1: '',
        time2: '',
        //左侧下方回收来源下拉框数据
        sfloptions: [{
          sflvalue: '选项1',
          sfllabel: '短信'
        }, {
          sflvalue: '选项2',
          sfllabel: '彩之云'
        }, {
          sflvalue: '选项3',
          sfllabel: '其他'
        }],
        sflvalue: '',
        //右侧上方问卷回收量下拉框
        options: [{
          value: 'huanan',
          label: '华南区',
          children: [{
            value: 'laochengqu',
            label: '老城区',
            children: [{
              value: 'A',
              label: 'A小区'
            }, {
              value: 'B',
              label: 'B小区'
            }, {
              value: 'C',
              label: 'C小区'
            }]
          }, {
            value: 'chengnanqu',
            label: '城南区',
            children: [{
              value: 'A',
              label: 'A小区'
            }, {
              value: 'B',
              label: 'B小区'
            }, {
              value: 'C',
              label: 'C小区'
            }]
          }, {
            value: 'chengbeiqu',
            label: '城北区',
            children: [{
              value: 'A',
              label: 'A小区'
            }, {
              value: 'B',
              label: 'B小区'
            }, {
              value: 'C',
              label: 'C小区'
            }]
          }]
        }, {
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'PS',
            label: 'PS课程'
          }, {
            value: 'UI',
            label: 'UI设计'
          }, {
            value: 'java',
            label: 'java程序',
            children: [{
              value: 'jichu',
              label: '基础'
            }, {
              value: 'jinjie',
              label: '进阶'
            }]
          }]
        }],
        selectedOptions: [],
        selectedOptions1: []
      }
    },
    mounted() {
      this.initEchartt();
      this.initEchartp();
    },
    methods: {
      handleChange(value) {
        console.log(value);
      },
      //创建echarts数据
      initEchartt() {
        let myCharty = this.$echarts.init(document.getElementById('shadeHack'));
        // 指定图表的配置项和数据
        let optionp = {
            tooltip: {
            	trigger: 'axis' //标注
            },
            xAxis: {
                data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
            },
            yAxis: {
            	type: 'value',
            },
            series: [{
                type: 'line',
                data: [30, 50, 36, 10, 70, 20, 60, 46, 10, 70, 20, 66, 100]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myCharty.setOption(optionp);
      },
      //创建echarts数据
      initEchartp() {
        let myChartp = this.$echarts.init(document.getElementById('sflf'));
        // 指定图表的配置项和数据
        let optionp = {
            tooltip: {
            	trigger: 'axis' //标注
            },
            series: [{
                type: 'pie',
                data: [
                    {name: '短信', value: 300},
                    {name: '彩之云', value: 400},
                    {name: '未知', value: 300}
                ]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChartp.setOption(optionp);
      }
    }
  }
</script>

<style scoped="scoped">
#SurVey{
	height: 87vh;
	width: 99%;
	overflow: auto;
}
/*头部内容区域*/
#SurVey .sur-header{
	display: flex;
}
.sur-header .sh-left{
	flex: 1;
	height: 36vh;
	margin-right: 10px;
	margin-top: 10px;
}
.sh-left .shle-header{
	display: flex;
	height: 18vh;
	width: 100%;
	text-align: center;
}
.sh-left .left-top1{
	flex: 1;
	width: 50%;
	height: 18vh;
	border: 1px solid #DCDFE6;
	margin-right: 5px;
	border-radius: 5px;
	box-sizing: border-box;
}
.sh-left .left-top2{
	flex: 1;
	width: 50%;
	height: 18vh;
	border: 1px solid #DCDFE6;
	border-radius: 5px;
	box-sizing: border-box;
}

.sh-left .shle-footer{
	display: flex;
	height: 18vh;
	width: 100%;
	text-align: center;
}
.sh-left .left-footer1{
	flex: 1;
	width: 50%;
	height: 17vh;
	border: 1px solid #DCDFE6;
	border-radius: 5px;
	margin-right: 5px;
	margin-top: 10px;
	box-sizing: border-box;
}
.sh-left .left-footer2{
	flex: 1;
	width: 50%;
	height: 17vh;
	border: 1px solid #DCDFE6;
	border-radius: 5px;
	margin-top: 10px;
	box-sizing: border-box;
}
.sur-header .sh-right{
	flex: 1;
	height: 36vh;
	margin-left: 5px;
	box-sizing: border-box;
	border: 1px solid #DCDFE6;
	border-radius: 5px;
	margin-top: 10px;
	box-sizing: border-box;
}
.sh-right .shr-header,
.sf-right .sfr-header{
	height: 38px;
	line-height: 38px;
	padding-left: 15px;
	box-sizing: border-box;
	overflow: hidden;
}
.sh-right .shr-header input{
	outline: none;
}
.shr-header .shr-span1,
.sfr-header .sfr-span1{
	margin-right: 40px;
	font-size: 14px;
}
.shr-header .shr-span2,
.sfr-header .sfr-span2{
	margin-left: 5px;
	margin-right: 5px;
	font-size: 14px;
}
.shr-header .block,
.sfr-header .block{
	display: inline-block;
}
.sh-right .shr-footer{
	height: 30vh;
	width: 45vw;
	background: transparent;
}

/*底部内容区域*/
#SurVey .sur-footer{
	display: flex;
}
.sur-footer .sf-left{
	flex: 1;
	height: 42vh;
	border: 1px solid #DCDFE6;
	margin-right: 10px;
	margin-top: 15px;
	border-radius: 5px;
	box-sizing: border-box;
}
.sf-left .sfl-header{
	height: 38px;
	line-height: 38px;
	padding: 0 15px;
	box-sizing: border-box;
	overflow: hidden;
}
.sf-left .sfl-header .el-select{
	float: right;
	margin-top: 6px;
	width: 150px;
	height: 30px;
	line-height: 30px;
}
.sf-left .sfl-footer{
	height: 33vh;
	width: 35vw;
	margin-top: 0px;
}

.sur-footer .sf-right{
	flex: 1;
	height: 42vh;
	border: 1px solid #DCDFE6;
	margin-left: 5px;
	margin-top: 15px;
	border-radius: 5px;
}
.sf-right .sfr-footer{
	padding-left: 15px;
	margin-top: 5px;
}
</style>